<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <meta name='viewport' content='user-scalable=no,initial-scale=2.0' />
    <style>
        body {
            background: #000;
            color: #fff;
            text-align: center;
            font-size: small;
        }
        div {
            margin: 10px
        }
    </style>
</head>
<body>
    <div>
        <h3>Pick An Emoji</h3> <img id='emojis' onclick='clickEmoji(event);'
            src=''>
    </div>
    <div>
        <label id='out'></label> <canvas id='emoji' width='8' height='8'></canvas>
    </div>
    <div>
        <button onclick='sendCode(Point)'>屏幕方向</button>
        <button onclick='sendCode(Mode)'>模式切换</button>
    </div>
    <div>
        <span>亮度</span>
        <label><input id='bn' type='range' min='0' max='255' step='1' oninput='sendBrightness()'/></label> 
    </div>
    <div>
        <button onclick='sendCode(ClockMode)'>时钟样式</button>
        <button onclick='sendCode(Color)'>颜色变更</button>
    </div>
    <div>
        <span>小时</span>
        <label><input id='hueh' type='range' min='0' max='360' step='1' oninput='sendColor(hueh)'/></label> 
    </div>
    <div>
        <span>分钟</span>
        <label><input id='huem' type='range' min='0' max='360' step='1' oninput='sendColor(huem)'/></label> 
    </div>
    <div>
        <span>秒钟</span>
        <label><input id='hues' type='range' min='0' max='360' step='1' oninput='sendColor(hues)'/></label>
    </div>
    <div><button onclick='sendCode(Save)'>配置保存</button></div>
    <script>
    var Mode = 'l';
    var Point = 'p';
    var ClockMode = 'cc';
    var Color = 'c';
    var Save = 's';
    var hueh = 'h';
    var huem = 'm';
    var hues = 's';
    function nw() { return new WebSocket('ws://' + location.hostname + ':81/', ['arduino']); } 
    var ws = nw(); 
    ws.onmessage = function (e) { console.log('Server: ', e.data); 
                    if(e.data[0]=='{'){
                        console.log('json');
                        var jsonOb = eval('('+e.data+')');
                        var brightNess = typeof(jsonOb.brightNess)=='undefined'? 150:jsonOb.brightNess;
                        var hueh = typeof(jsonOb.hueh)=='undefined'? 180:jsonOb.hueh;
                        var huem = typeof(jsonOb.huem)=='undefined'? 180:jsonOb.huem;
                        var hues = typeof(jsonOb.hues)=='undefined'? 180:jsonOb.hues;
                        document.getElementById('bn').value=parseInt(brightNess);
                        document.getElementById('hueh').value=parseInt(hueh);
                        document.getElementById('huem').value=parseInt(huem);
                        document.getElementById('hues').value=parseInt(hues);
                               
                    }
                };
    var sk = 0;
    function cc(c) { return String.fromCharCode(c / 2); }
    function clickEmoji(e) { 
        var xo = 3; var yo = 3; var xs = 13; var ys = 12; var x = e.offsetX; var y = e.offsetY; 
        var c = Math.round((x - xo - 4) / xs); 
        var r = Math.round((y - yo - 4) / ys); 
        document.getElementById('out').innerText = 'Selected [' + c + ', ' + r + ']'; 
        var img = document.getElementById('emojis'); 
        var ce = document.getElementById('emoji'); 
        var ctx = ce.getContext('2d'); 
        ctx.drawImage(img, -(xo + (xs * c)), -(yo + (ys * r)), 131, 122);
        var d = ctx.getImageData(0, 0, 8, 8).data; 
        var t = 'e'; 
        for (var i = 0; i < 8; i++)
        {
            for(var j = 0; j < 8; j++){
                var imageData = ctx.getImageData(j, i, 1, 1).data;
                t += cc(imageData[0]);
                t += cc(imageData[1]);
                t += cc(imageData[2]);
            }
        }
        ws.send(t, { binary: true }); }
        function sendCode(c){
            console.log('发送命令：'+c);
            ws.send(c);
        }
        function sendBrightness() { 
            var Obrightness = document.getElementById('bn').value; 
            var oMessage = 'bn'; 
            if (Obrightness.length == 1) { 
                oMessage = oMessage + '00'; 
            } else if (Obrightness.length == 2) { 
                oMessage = oMessage + '0'; 
            } 
            oMessage = oMessage + parseInt(Obrightness ? Obrightness : 255); 
            console.log('oMessage: ' + oMessage);
            ws.send(oMessage);
        }
        function sendColor(n){
            var OHueValue = document.getElementById('hue'+n).value; 
            var oMessage = 'h'+n; 
            if (OHueValue.length == 1) { 
                oMessage = oMessage + '00'; 
            } else if (OHueValue.length == 2) { 
                oMessage = oMessage + '0'; 
            }
            oMessage = oMessage + parseInt(OHueValue ? OHueValue : 999); 
            console.log('oMessage: ' + oMessage); ws.send(oMessage); 
        }
    </script> 
</body> 
</html>